<template>
  <view class="extend-row" :style="extendRowStyle">
    <view
      v-for="(item, index) in extendGroup"
      :key="item.id"
      class="extend-item"
      :style="extendItemStyle"
      @tap.stop.prevent="onExtendAction(item)"
    >
      <slot :name="item.id"></slot>
    </view>
  </view>
</template>

<script setup>
import { computed, inject } from 'vue'
import { rowDirectionMap, rowTypeMap } from './extend-config'

const props = defineProps({
  // 扩展按钮组，最多5个按钮
  extendGroup: {
    type: Array,
    default: () => {
      return [
        { id: 'e1', name: '第1' },
        { id: 'e2', name: '第2' },
        { id: 'e3', name: '第3' },
        { id: 'e4', name: '第4' },
        { id: 'e5', name: '第5' }
      ]
    }
  },
  // 扩展按钮尺寸 单位px
  extendItemSize: {
    type: Number,
    default: 40
  },
  // 扩展位置
  placement: {
    type: String,
    default: 'auto' // auto | top | bottom | left | right
  },
  // 排列方式
  rowType: {
    type: String,
    default: 'row' // row | column
  },
  // 排列方向
  rowDirection: {
    type: String,
    default: 'top' // top | bottom | left | right
  }
})

const emits = defineEmits(['extendAction'])

const edge = inject('E_EDGE')

const extendItemStyle = computed(() => {
  return {
    width: props.extendItemSize + 'px',
    height: props.extendItemSize + 'px'
  }
})

const extendRowStyle = computed(() => {
  const { placement, rowType, rowDirection } = props
  const result = {}
  let newPlace = ''

  if (placement == 'auto') {
    newPlace = rowDirectionMap[rowDirection][edge.value.direction]
  } else {
    newPlace = rowDirectionMap['reverse'][placement]
  }

  result[newPlace] = 'calc(100% + 5px)'
  result['flex-direction'] = rowTypeMap[rowType][newPlace]

  return result
})

function onExtendAction(e) {
  emits('extendAction', e)
}
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
    addGlobalClass: true,
    virtualHost: true,
    multipleSlots: true
  }
}
</script>

<style lang="scss">
.extend-row {
  position: absolute;
  display: flex;
  gap: 5px;

  .extend-item {
    border-radius: 50%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    // position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
